<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html">

    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <meta name="keywords" content="Technology product, laptop" />
        <meta name="description" content="techpro.com" />

        <!--        <link rel="stylesheet" type="text/css" href="./../resources/css/default.css" />
                <link rel="stylesheet" type="text/css" href="./../resources/css/cssLayout.css" />-->
        <link rel="stylesheet" type="text/css" href="css/templatemo_style.css" />
        <link rel="stylesheet" type="text/css" href="css/styles.css" />

        <script language="javascript" type="text/javascript" src="js/mootools-1.2.1-core.js"></script>
        <script language="javascript" type="text/javascript" src="js/mootools-1.2-more.js"></script>
        <script language="javascript" type="text/javascript" src="js/slideitmoo-1.1.js"></script>
        <script language="javascript" type="text/javascript">
            window.addEvents({
                'domready': function(){
                    /* thumbnails example , div containers */
                    new SlideItMoo({
                        overallContainer: 'SlideItMoo_outer',
                        elementScrolled: 'SlideItMoo_inner',
                        thumbsContainer: 'SlideItMoo_items',		
                        itemsVisible: 5,
                        elemsSlide: 3,
                        duration: 200,
                        itemsSelector: '.SlideItMoo_element',
                        itemWidth: 140,
                        showControls:1});
                }
            });
        </script>
        <script language="javascript" type="text/javascript">
            function clearText(field){
                if (field.defaultValue == field.value) field.value = '';
                else if (field.value == '') field.value = field.defaultValue;
            }
        </script>

        <ui:insert name="head">Head</ui:insert>
    </h:head>

    <h:body>
        <div id="frame">
            <div id="templatemo_wrapper">
                <!--Begin Navigator-->
                <div id="templatemo_menu" style="font-family:'Times New Roman', Times, serif">
                    <ul>
                        <li><a href="home.xhtml" class="current">Home</a></li>
                        <li><a href="register/register.xhtml" target="_parent">Register</a></li>
                        <li><a href="about.xhtml" target="_parent">About</a></li>
                        <li><a href="contact.xhtml" target="_parent">Contact</a></li>
                    </ul>    	
                </div>
                <!--End Navigator-->

                <!--Begin Logo-->
                <div id="templatemo_header_bar">
                    <div id="header">
                        <div class="right">
                        </div>
                        <h1>
                            <a href="home.xhtml" target="_parent">
                                <img src="img/templatemo_logo.png" alt="Site Title" />
                                <span>Technology product</span>
                            </a>
                        </h1>
                    </div>
                    <!--End Logo-->

                    <!--Begin Search-->
                    <div id="search_box">
                        <form action="#" method="get">
                            <input type="text" value="Enter keyword here..." name="q" 
                                   size="10" id="searchfield" title="searchfield" 
                                   onfocus="clearText(this)" onblur="clearText(this)" />
                            <input type="submit" name="Search" value=" " alt="Search" 
                                   id="searchbutton" title="Search" />
                        </form>
                    </div>
                    <!--End Search-->

                </div>

                <div class="cleaner">
                </div>

                <div id="sidebar">
                    <div class="sidebar_top">
                    </div>
                    <div class="sidebar_bottom">
                    </div>

                    <div class="sidebar_section">
                        <h2>Login</h2>
                        <form action="#" method="get">
                            <label>Username</label>
                            <input type="text" value="" name="username" size="10" 
                                   class="input_field" title="username" />
                            <label>Password</label>
                            <input type="password" value="" name="password" class="input_field" 
                                   title="password" />
                            <a href="#">Sign up</a>
                            <input type="submit" name="login" value="Login" alt="Login" 
                                   id="submit_btn" title="Login" />
                        </form>
                        <div class="cleaner"></div>
                    </div>

                    <!--Begin Menu-->
                    <div class="sidebar_section">
                        <ui:insert name="left">Left</ui:insert>
                    </div>
                    <!--End Menu-->

                    <!--Begin Ads-->
                    <!--                    <div class="sidebar_section">
                                            <h2>Discounts</h2>
                                            <div class="image_wrapper">
                                                <a href="#" target="_parent">
                                                    <img src="img/image_01.jpg" alt="product" />
                                                </a>
                                            </div>
                                            <div class="discount">
                                                <span>25% off</span> | 
                                                <a href="#">Read more</a>
                                            </div>
                                        </div>  -->
                    <!--End Ads-->
                </div>

                <!--Begin Content-->
                <div id="templatmeo_content">
                    <!--Begin Slider-->
                    <div id="latest_product_gallery">
                        <!--                        <h2>Featured Products</h2>-->
                        <a href="cart.xhtml">View cart</a>
                        <div id="SlideItMoo_outer">	
                            <div id="SlideItMoo_inner">			
                                <div id="SlideItMoo_items">
                                    <div class="SlideItMoo_element">
                                        <a href="#">
                                            <img src="img/templatemo_product_01.png" alt="product 1" /></a>

                                    </div>	
                                    <div class="SlideItMoo_element">
                                        <a href="#">
                                            <img src="img/templatemo_product_02.png" alt="product 2" /></a>

                                    </div>
                                    <div class="SlideItMoo_element">
                                        <a href="#">
                                            <img src="img/templatemo_product_03.png" alt="product 3" /></a>

                                    </div>
                                    <div class="SlideItMoo_element">
                                        <a href="#">
                                            <img src="img/templatemo_product_04.png" alt="product 4" /></a>

                                    </div>
                                    <div class="SlideItMoo_element">
                                        <a href="#">
                                            <img src="img/templatemo_product_05.png" alt="product 5" /></a>

                                    </div>
                                    <div class="SlideItMoo_element">
                                        <a href="#">
                                            <img src="img/templatemo_product_06.png" alt="product 6" /></a>

                                    </div>
                                    <div class="SlideItMoo_element">
                                        <a href="#">
                                            <img src="img/templatemo_product_07.png" alt="product 7" /></a>
                                    </div>
                                    <div class="SlideItMoo_element">
                                        <a href="#">
                                            <img src="img/templatemo_product_08.png" alt="product 8" /></a>
                                    </div>
                                </div>			
                            </div>
                        </div>
                    </div>
                    <!--End Slider-->

                    <!--Begin Content-->
                    <div class="content_section">
                        <ui:insert name="content">Content</ui:insert>
                    </div>
                </div>
                <!--End Content-->
            </div>

            <!--            Begin Footer
                        <div id="templatemo_footer_wrapper">
                            <div id="templatemo_footer">
                                <ul class="footer_menu" style="font-family:'Times New Roman', Times, serif">
                                    <li><a href="#">Home</a></li>
                                    <li><a href="#" target="_parent">Sign up</a></li>
                                    <li><a href="#">About</a></li>
                                    <li><a href="#">Contact</a></li>
                                </ul>
                                <span>TP © 2012</span>
                            </div>
                        </div>
                        End Footer-->
        </div>
    </h:body>
</html>

<!--
<div id="top">
    <ui:insert name="top">Top</ui:insert>
</div>
<div>
    <div id="left">
        <ui:insert name="left">Left</ui:insert>
    </div>
    <div id="content" class="left_content">
        <ui:insert name="content">Content</ui:insert>
    </div>
</div>
<div id="bottom">
    <ui:insert name="bottom">Bottom</ui:insert>
</div>
-->